<template>
    <el-card>
    <div>
        <!-- 头顶 -->
        <el-breadcrumb separator="/" class="a">
            <!-- :to="{ path: '/users' }"  跳转 -->
            <el-breadcrumb-item :to="{ path: '/users' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="params" class="demo-form-inline">
            <el-form-item>
                <el-input :data="goodslist" style="width: 600px;" v-model="params.query" placeholder="请输入内容"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button type="primary" @click="onAdd">添加商品</el-button>
            </el-form-item>     
        </el-form>
        <!-- 表 -->
        <el-table
                :data="goodslist"
                max-height="420"
                style="width: 100%">
            <el-table-column  label="#" type="index" />
            <el-table-column label="商品名称" prop="goods_name" />
            <el-table-column label="商品价格(元)" prop="goods_price" />
            <el-table-column label="商品重量" prop="goods_weight" />
            <el-table-column label="创建时间" prop="upd_time" >
                <template slot-scope="s">
                    <span>{{ s.row.upd_time |dateFormat }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                        @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!-- current-page当前页
          page-size：每页记录数
          page-sizes：每页记录数下拉列表，第一个数与每页记录数必须一致
          total：总记录数 -->
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pagenum"
                :page-sizes="[1,5, 30, 50]"
                :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
        </el-pagination>
        
        <!-- 编辑 -->
        <el-dialog
            :visible.sync="dialogVisibles"
            width="30%">
            <el-form ref="customform" :model="bianJI" label-width="80px"
                                    status-icon :rules="rules">
                <el-form-item label="id" prop="username">
                    <el-input v-model="bianJI.goods_id"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="username">
                    <el-input v-model="bianJI.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格(元)" prop="username">
                    <el-input v-model="bianJI.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="username">
                    <el-input v-model="bianJI.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="重量" prop="username">
                    <el-input v-model="bianJI.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="介绍" prop="username">
                    <el-input v-model="bianJI.goods_introduce"></el-input>
                </el-form-item>
                <!-- <el-form-item label="上传的图片临时路径(对象)" prop="username">
                    <el-input v-model="bianJI.pics"></el-input>
                </el-form-item>
                <el-form-item label="商品的参数(数组)" prop="username">
                    <el-input v-model="bianJI.attrs"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibles = false">取 消</el-button>
                <el-button type="primary" @click="onUpdUser">编 辑</el-button>
            </span>
        </el-dialog>  
            
        
    </div>
</el-card>
</template>

<script>
export default {
    data(){
        return{
            
            //列表
            params:{
                query:'',
                pagenum:1,
                pagesize:5
            },
            //添加
            // form:{
            //     goods_name:'',
            //     goods_price:'',
            //     goods_weight:'',
            //     upd_time:'',
            // },
            rules:{

            },
            goodslist:[],
            bianJI:[
                
            ],
            total:0,
            dialogVisible:false,
            dialogVisibles:false,
        }
        
    },
    methods:{
        //删除
        async handleDelete(_id){
            console.log(_id);
            if (confirm('确定永久删除吗?')) {
                
                let  a= await this.$http.delete(`/api/private/v1/goods/${_id.goods_id}`);
                this.initTable();
            } 
        },
        // //添加
        // async onAddUser(){
        //     let ret= await this.$http.post("/api/private/v1/goods",this.form)
        //     if (ret.meta.status!=201) {
        //         return this.$message.error(ret.meta.msg)
        //     }
        //     this.$message.success(ret.meta.msg)
        //     this.initTable();
        //     this.dialogVisible=false;
        //     // console.log(data);
        // },
        //添加
        onAdd(){   
            this.$router.push('/goodsadd')
        },
        //编辑更新
        async onUpdUser(){
            let {data}=await this.$http.put(`/api/private/v1/goods/${this.bianJI.goods_id}`,
            {"goods_name":this.bianJI.goods_name,"goods_price":this.bianJI.goods_price,
            "goods_number":this.bianJI.goods_number,"goods_weight":this.bianJI.goods_weight,
            "goods_introduce":this.bianJI.goods_introduce,"goods_cat":this.bianJI.goods_cat});
            this.initTable();
            this.dialogVisibles=false;
        },
        //编辑
        async handleEdit(obj){
            // this.bianJI=obj;
            let res=await this.$http.get("/api/private/v1/goods/"+obj.goods_id)
            this.bianJI=res.data
            this.dialogVisibles=true;
        },
        //搜索
        async onSearch(){
            this.initTable();
        },
        //修改每页记录数
        handleSizeChange(val){
            this.params.pagesize=val*1;
            this.initTable();
        },
        //点击分页按钮
        handleCurrentChange(val){
            this.params.pagenum=val*1;
            this.initTable();
        },
        async initTable(){
            let {data}=await this.$http.get("/api/private/v1/goods",
            {params:this.params});
            this.goodslist=data.goods;
            console.log(data);
            this.total=data.total;
        }
    },
    async mounted(){
        this.initTable();
        }
    }

</script>

<style lang="scss" scoped>
    .el-header, .el-footer {
        background-color: #edeff3;
        color: #333(202, 68, 68);
        text-align: center;
        line-height: 60px;
        }
        .demo-form-inline{
            display: flex;
            flex-direction: row;
        }
        .to{
            display: flex;
            flex-direction: row;
           
        }
        .a{
            width: 100%;
            height: 60px;
            background-color: #e0e5ee;
            text-align: center;
            line-height: 60px;
        }
</style>